<template>
    <div class="workflow-editor">
        <div class="editor-header">
            <h3>工作流编辑器</h3>
            <div class="actions">
                <el-button-group>
                    <el-button 
                        type="primary" 
                        :icon="Upload"
                        @click="handleImport"
                    >
                        导入 JSON
                    </el-button>
                    <el-button 
                        :icon="Download"
                        @click="handleExport"
                    >
                        导出 JSON
                    </el-button>
                </el-button-group>
            </div>
        </div>

        <div class="editor-content">
            <!-- 节点列表 -->
            <div class="node-list">
                <el-collapse v-model="activeNodes">
                    <el-collapse-item 
                        v-for="(nodes, category) in groupedNodes" 
                        :key="category"
                        :title="category"
                        :name="category"
                    >
                        <div class="node-grid">
                            <div 
                                v-for="node in nodes"
                                :key="node.type"
                                class="node-item"
                                draggable="true"
                                @dragstart="handleDragStart($event, node)"
                            >
                                <el-icon><component :is="node.icon" /></el-icon>
                                <span>{{ node.label }}</span>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>

            <!-- 画布区域 -->
            <div 
                class="canvas-area"
                ref="canvasRef"
                @drop="handleDrop"
                @dragover.prevent
            >
                <div 
                    v-for="node in workflowNodes"
                    :key="node.id"
                    class="workflow-node"
                    :style="getNodeStyle(node)"
                    @mousedown="startDrag(node, $event)"
                >
                    <div class="node-header">
                        {{ node.label }}
                        <el-button 
                            type="danger" 
                            size="small" 
                            circle
                            @click="removeNode(node)"
                        >
                            <el-icon><Delete /></el-icon>
                        </el-button>
                    </div>
                    <div class="node-ports">
                        <div 
                            v-for="port in node.ports"
                            :key="port.id"
                            class="port"
                            :class="port.type"
                            @mousedown="startConnection(node, port, $event)"
                        >
                            {{ port.label }}
                        </div>
                    </div>
                </div>

                <!-- 连线 SVG -->
                <svg class="connections">
                    <path
                        v-for="conn in connections"
                        :key="conn.id"
                        :d="getConnectionPath(conn)"
                        :class="{ active: selectedConnection === conn }"
                        @click="selectConnection(conn)"
                    />
                </svg>
            </div>

            <!-- 属性面板 -->
            <div class="properties-panel">
                <template v-if="selectedNode">
                    <h4>节点属性</h4>
                    <el-form label-width="80px">
                        <el-form-item label="名称">
                            <el-input v-model="selectedNode.label" />
                        </el-form-item>
                        <!-- 根据节点类型显示不同的属性配置 -->
                        <component
                            :is="getNodePropertiesComponent(selectedNode.type)"
                            v-model="selectedNode.config"
                        />
                    </el-form>
                </template>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Upload, Download, Delete } from '@element-plus/icons-vue';
import type { WorkflowNode, NodeConnection, NodePort } from '@/types/workflow-editor';

const props = defineProps<{
    modelValue?: any;
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: any): void;
    (e: 'change', value: any): void;
}>();

// 状态管理
const activeNodes = ref<string[]>(['基础节点']);
const workflowNodes = ref<WorkflowNode[]>([]);
const connections = ref<NodeConnection[]>([]);
const selectedNode = ref<WorkflowNode | null>(null);
const selectedConnection = ref<NodeConnection | null>(null);
const canvasRef = ref<HTMLElement>();

// 拖拽状态
const dragState = ref({
    isDragging: false,
    startX: 0,
    startY: 0,
    node: null as WorkflowNode | null
});

// 连线状态
const connectionState = ref({
    isConnecting: false,
    startNode: null as WorkflowNode | null,
    startPort: null as NodePort | null,
    tempEndX: 0,
    tempEndY: 0
});

// 节点分组
const groupedNodes = computed(() => ({
    '基础节点': [
        { type: 'input', label: '输入', icon: 'InputIcon' },
        { type: 'output', label: '输出', icon: 'OutputIcon' },
        { type: 'process', label: '处理', icon: 'ProcessIcon' }
    ],
    '模型节点': [
        { type: 'model', label: '模型', icon: 'ModelIcon' },
        { type: 'sampler', label: '采样器', icon: 'SamplerIcon' }
    ]
}));

// 方法实现
const handleImport = () => {
    // 实现 JSON 导入逻辑
};

const handleExport = () => {
    // 实现 JSON 导出逻辑
};

const handleDragStart = (event: DragEvent, node: any) => {
    // 实现节点拖拽开始逻辑
};

const handleDrop = (event: DragEvent) => {
    // 实现节点放置逻辑
};

const startDrag = (node: WorkflowNode, event: MouseEvent) => {
    // 实现节点移动逻辑
};

const removeNode = (node: WorkflowNode) => {
    // 实现节点删除逻辑
};

const startConnection = (node: WorkflowNode, port: NodePort, event: MouseEvent) => {
    // 实现连线开始逻辑
};

const getConnectionPath = (conn: NodeConnection) => {
    // 实现连线路径计算
    return '';
};

const selectConnection = (conn: NodeConnection) => {
    // 实现连线选择逻辑
};

const getNodeStyle = (node: WorkflowNode) => {
    // 实现节点样式计算
    return {
        left: `${node.x}px`,
        top: `${node.y}px`
    };
};

const getNodePropertiesComponent = (type: string) => {
    // 根据节点类型返回对应的属性编辑组件
    return null;
};

// 生命周期钩子
onMounted(() => {
    // 初始化事件监听
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
});

onUnmounted(() => {
    // 清理事件监听
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
});

// 鼠标事件处理
const handleMouseMove = (event: MouseEvent) => {
    // 处理拖拽和连线的鼠标移动
};

const handleMouseUp = () => {
    // 处理拖拽和连线的鼠标释放
};
</script>

<style lang="scss" scoped>
.workflow-editor {
    height: 100%;
    display: flex;
    flex-direction: column;

    .editor-header {
        padding: 10px;
        border-bottom: 1px solid #dcdfe6;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h3 {
            margin: 0;
        }
    }

    .editor-content {
        flex: 1;
        display: flex;
        overflow: hidden;

        .node-list {
            width: 250px;
            border-right: 1px solid #dcdfe6;
            overflow-y: auto;

            .node-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
                padding: 10px;
            }

            .node-item {
                padding: 10px;
                border: 1px solid #dcdfe6;
                border-radius: 4px;
                cursor: move;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 5px;

                &:hover {
                    background: #f5f7fa;
                }
            }
        }

        .canvas-area {
            flex: 1;
            position: relative;
            overflow: auto;
            background: #f5f7fa;

            .workflow-node {
                position: absolute;
                background: white;
                border: 1px solid #dcdfe6;
                border-radius: 4px;
                padding: 10px;
                min-width: 150px;
                cursor: move;

                .node-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;
                }

                .node-ports {
                    .port {
                        padding: 5px;
                        margin: 5px 0;
                        border-radius: 4px;
                        cursor: pointer;

                        &.input {
                            background: #f0f9eb;
                        }

                        &.output {
                            background: #f4f4f5;
                        }

                        &:hover {
                            opacity: 0.8;
                        }
                    }
                }
            }

            .connections {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;

                path {
                    fill: none;
                    stroke: #909399;
                    stroke-width: 2;
                    pointer-events: all;
                    cursor: pointer;

                    &.active {
                        stroke: #409eff;
                        stroke-width: 3;
                    }
                }
            }
        }

        .properties-panel {
            width: 300px;
            border-left: 1px solid #dcdfe6;
            padding: 10px;
            overflow-y: auto;

            h4 {
                margin: 0 0 15px;
            }
        }
    }
}
</style> 